<template>
	<div class="layout" :class="{'layout-hide-text': spanLeft < 4}">
		<Affix>
		<Row type="flex" class="demo-affix" style="background: #464c5b">
			
			<i-col :span="spanLeft" class="layout-menu-left" style="height: 100%;">
				<Menu theme="dark" active-name="1-2" :open-names="['1']" :accordion='true' :width="menuWidth" class="menu" @on-open-change="changeMenu">
					<div class="layout-logo-left">
						<span style="color: indianred;font-size: 16px;">model</span><strong style="color: coral;">model</strong>
					</div>
					<Submenu name="1" class="index">
						<template slot="title">
							<Icon type="ios-paper" :size="iconSize"></Icon>
							<span class="layout-text">首页</span>
						</template>
					</Submenu>
					<Submenu name="2" class="hide">
						<template slot="title">
							<Icon type="ios-paper" :size="iconSize"></Icon>
							<span class="layout-text">我的快捷</span>
						</template>

					</Submenu>

					<Submenu name="3" class="hide">
						<template slot="title">
							<Icon type="ios-paper" :size="iconSize"></Icon>
							<span class="layout-text">事务管理</span>
						</template>
							<Menu-item name="3-1">
									<router-link to="TaskManager" tag="div" class="router">物资装备</router-link>
							</Menu-item>
							<Menu-item name="3-2">
									<router-link to="applyList" tag="div" class="router">申请列表</router-link>
							</Menu-item>
							<Menu-item name="3-3">
									<router-link to="examineTransaction" tag="div" class="router">审批事务</router-link>
							</Menu-item>
					</Submenu>

					<Submenu name="4" class="hide">
						<template slot="title">
							<Icon type="ios-paper" :size="iconSize"></Icon>
							<span class="layout-text">个人中心</span>
						</template>
						<Menu-item name="4-1">
							<router-link to="BaseInfo" tag="div" class="router">基本信息</router-link>
						</Menu-item>
						<Menu-item name="4-2">
							<router-link to="MyApprove" tag="div" class="router">我的审批(第二迭代)</router-link>
						</Menu-item>
						<Menu-item name="4-3">
							<router-link to="Setshortcut" tag="div" class="router">快捷设置</router-link>
						</Menu-item>
					</Submenu>

					<Submenu name="5" class="hide">
						<template slot="title">
							<Icon type="ios-paper" :size="iconSize"></Icon>
							<span class="layout-text">系统设置</span>
						</template>

						<Menu-item name="5-3">
							<router-link to="RightsManagement" tag="div" class="router">角色</router-link>
						</Menu-item>
						<Menu-item name="5-4">
							<router-link to="DeptManager" tag="div" class="router">用户</router-link>
						</Menu-item>
						<Menu-item name="5-5">
							<router-link to="FunctionModuleManager" tag="div" class="router">个人信息</router-link>
						</Menu-item>
						<Menu-item name="5-6">
							<router-link to="DictionaryManager" tag="div" class="router">修改密码</router-link>
						</Menu-item>
						<Menu-item name="5-7">
							<router-link to="dealFlow" tag="div" class="router">工作流管理</router-link>
						</Menu-item>
						<Menu-item name="5-8">
							<router-link to="SystemLog" tag="div" class="router">系统日志</router-link>
						</Menu-item>
						<Menu-item name="5-10">
							<router-link to="formManager" tag="div" class="router">表单管理</router-link>
						</Menu-item>
						<Menu-item name="5-9">
							<router-link to="IndividuationManager" tag="div" class="router">个性化管理(第二迭代)</router-link>
						</Menu-item>
					</Submenu>
				</Menu>
			</i-col>
			
			<i-col :span="spanRight">
				
				<Row class="main-content">
					<Col span="1">
					<i-button type="text" @click="toggleClick">
						<Icon type="navicon" size="32"></Icon>
					</i-button>
					</Col>
					<div style="position: absolute;right: 40px;">
						<img :src="imgUrlSuccess" width="40px" height="40px" />
						<p><span>部门</span>-<span>姓名</span></p>
						<a @click="message">
							<Badge class-name="demo-badge-alone" count="1000" overflow-count="999" style="margin-top: -40px;">
								<Icon type="ios-bell-outline" size="30"></Icon>
							</Badge>
						</a>
						<button @click="logout">退出</button>
					</div>
				</Row>
				<div class="layout-content">
					<router-view ></router-view>
				</div>
			</i-col>
			
		</Row>
		</Affix>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				spanLeft: 4,
				spanRight: 20,
				menuWidth: '4',
				menuList: [],
				imgUrlSuccess:''
			}
		},
		computed: {
			iconSize() {
				return this.spanLeft === 4 ? 14 : 24;
			}
		},
		mounted() {
		this.userInfo();
		this.second();
		},
		methods: {
			logout(){
				this.$http.get(this.url + 'logout').then(response => {
							let isOk = response.data;
							if(isOk.success) {
//								console.info(isOk.obj)
								this.$router.replace(
									{ path: 'login' 
									});
									localStorage.clear();
							} else {
								this.$Message.error(isOk.message);
							}

						}, response => {
							
						});
			},
			second(){
				this.$http.post(this.url + 'person/select' ,{fstate:1}).then(response => {
							let isOk = response.data;
							if(isOk.success) {
//								console.info(isOk.obj)
							
							} else {
								this.$Message.error(isOk.message);
							}

						}, response => {
							
						});
			},
			userInfo(){
				this.$http.get(this.url + 'userInfo').then(response => {
							let isOk = response.data;
							if(isOk.success) {
//								console.info(isOk.obj)
							} else {
								this.$Message.error(isOk.message);
							}

						}, response => {
							
						});
			},
			changeMenu() {
//				this.spanLeft = 4;
//				this.spanRight = 20;
//				this.$router.replace({
//					path: '/index'
//				})
		},
			//			侧边栏伸缩栅格布局
			toggleClick() {
				if(this.spanLeft === 4) {
					this.spanLeft = 1;
					this.spanRight = 23;
				} else {
					this.spanLeft = 4;
					this.spanRight = 20;
				}
			},
			getMenu: function() {
				let _self = this;
				//				this.$http.get(this.url + "menu/select").then(response => {
				//					let isOk = response.data;
				//					if(isOk.success) {
				//						_self.menuList = []
				//						if(isOk.obj != null && typeof isOk.obj != 'undefined') {
				//							for(let i = 0; i < isOk.obj.length; i++) {
				//								if(isOk.obj[i].fno.length == 2) {
				//									_self.menuList.push(_self.formatMenuList(isOk.obj[i], isOk.obj))
				//								}
				//							}
				//						}
				//					} else {
				//						this.$Message.error(isOk.msg);
				//					}
				//				}, response => {
				//
				//				});
			},
//			formatMenuList: function(data, datas) {
//				let obj = new Object;
//				obj = data;
//				obj.children = [];
//				for(let i = 0; i < datas.length; i++) {
//					let dataFnoSize = data.fno.length;
//					let datasFnoSize = data.fno.length + 2;
//					if(datasFnoSize == datas[i].fno.length && data.fno == datas[i].fno.substring(0, dataFnoSize)) {
//						obj.children.push(this.formatMenuList(datas[i], datas))
//					}
//				}
//				return obj;
//			},
			message() {
				this.$router.replace({
					path: '/message'
				})
			}
		}
	}
</script>
<style>
	.layout .main-content {
		height: 40px;
		line-height: 40px;
	}
	
	img {
		margin: 5px;
		border-radius: 50%;
	}
	
	.main-content p {
		display: inline-block;
		line-height: 40px;
		vertical-align: top;
		font-size: 1.2em;
		font-weight: bold;
		margin: 0 10px;
	}
</style>